<template>
	<view class="content">
		<cu-custom style="background-color: #fff;opacity: 1;" bgColor="bg-white" :isBack="true">
			<block slot="content">长株潭标志工程</block>
			<view slot="right"  @tap="goShaixuan"><image src="../../static/icon/shaixuan.png" style="width: 15px;height: 17px;"></image> </view>
		</cu-custom>
		
		<view class="projectHead">
			<view class="searchView">
				<view class="time uni-flex">
					<!-- <view class="timeText">2021</view> -->
					<view class="search_nf">
						<picker :range="years" value="5" @change="yearChange">
							{{ years[yearsIndex] }} 年 <span class='r'></span>
						</picker>
					</view>
					<image class="shaixuanFont" src="../../static/icon/triangleFont.png"></image> 
				</view>
				<input class="searchProj" type="text" placeholder="请输入项目名称" v-model="inputText" @confirm="confirm"/>
				<view class="searchFont" @click="goSearch"><image src="../../static/icon/search.png"></image> </view>
			</view>
		</view>
			<view class="uni-list item-wrap" style="display: block;" >
				<!-- 如果为空，显示图片 -->
				<view class="noData" v-if="isShowNodata==true">
					<view class="imgBox"> 
						<image class="noDataImg" style="width: 284px;height: 284px;" src="../../static/nodata.png"></image>
					</view>
					<view class="textView">
						<view class="smallText" style="text-align: center;">没有数据哦~</view>
					</view>
				</view>
				<view class="uni-list-cell" style="display: block;" v-else v-for="(item,index) in news" :key="index"  
				:data-newsid="item.newsid">
				<!-- 父级 -->
				<view class="uni-media-list" v-if="item.linkId==null">
					<view class="uni-media-list-body">
						<view class="listContent" hover-class="uni-list-cell-hover" @tap="openinfo" :data-projectId="item.projectId">
							<view class="uni-media-list-text-top titleText">{{item.num}}. {{item.title}}</view>
							<view class="uni-flex uni-ellipsis">
							  <view class="infoText2">
								计划投资：{{item.planInvestment}}亿元
							  </view>
							  <view class="infoText2">完成进度:{{item.rate}}%</view>
							</view>
						</view>
						<view class="imgView uni-flex" v-if="item.photos.length!=0">
							<view class="imgBox" v-for="(imgItem,index) in item.photos" :key="index"> 
								<image :src="imgItem.fjdz" @click="previewImage(imgItem.fjdz)"></image>
							</view>
						</view>
						<view class="btomFont">
							<view class="btomFont_one" :class="[item.isMonitor==1?'btomActive':'']"  @tap="goJk" :data-projectId="item.projectId" :data-isMonitor="item.isMonitor">
								<image class="jiankongFont"  v-if="item.isMonitor==1" src="../../static/icon/icon-2.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon.png"></image>
								<view :class="{btomActive:item.isMonitor==1}">监控</view>
							</view>
							<view class="btomFont_one" :class="{'btomActive':rSelect.indexOf(index)!=-1}" @click="focusOn(item,index)" :key="index" :data-projectId="item.projectId" :data-isCare="item.isCare">
								<view class="jiankongFont jiankImg" ></view>
								<!-- <image class="jiankongFont" :class="{btomActive:item.isCare==1}" v-else src="../../static/icon/icon-1.png"></image> -->
								<view>关注</view>
							</view>
							<!-- <view :class="{'ofnt': }" @tap="focusOn(index)">关注</view> -->
							<view class="btomFont_one" :class="[item.bw!=''&&item.bw!=null ?'btomActive':'']" @click="viewMap" :data-projectId="item.projectId" :data-bw="item.bw" :data-dj="item.dj">
								<image class="jiankongFont"  v-if="item.bw!=''&&item.bw!=null" src="../../static/icon/icon-5.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon-4.png"></image>
								<view >地图</view>
							</view>
						</view>
					</view>
				</view>
			<!-- 子级 -->
			<view class="uni-media-list" v-else>
				<view class="uni-media-list-body">
					<view class="listContent" hover-class="uni-list-cell-hover" @tap="openinfo" :data-projectId="item.projectId">
						<view class="uni-media-list-text-top titleText">({{item.nums}}). {{item.title}}</view>
						<view class="uni-flex uni-ellipsis">
						  <view class="infoText2">
							计划投资：{{item.planInvestment}} 亿元
						  </view>
						  <view class="infoText2">完成进度:{{item.rate}}%</view>
						</view>
					</view>
					<view class="imgView uni-flex" v-if="item.photos.length!=0">
						<view class="imgBox" v-for="(imgItem,index) in item.photos" :key="index"> 
							<image :src="imgItem.fjdz" @click="previewImage(imgItem.fjdz)"></image>
						</view>
					</view>
					<view class="btomFont">
						<view class="btomFont_one":class="[item.isMonitor==1?'btomActive':'']"  @tap="goJk" :data-projectId="item.projectId" :data-isMonitor="item.isMonitor">
							<image class="jiankongFont"  v-if="item.isMonitor==1" src="../../static/icon/icon-2.png"></image>
							<image class="jiankongFont" v-else src="../../static/icon/icon.png"></image>
							<view >监控</view>
						</view>
						<!-- <view class="btomFont_one" :class="{btomActive:item.isCare==1||isCare==1}" @click="focusOn" :key="index" :data-newsid="item.newsid" :data-isCare="item.isCare"> -->
						<view class="btomFont_one" :class="{'btomActive':rSelect.indexOf(index)!=-1}" @click="focusOn(item,index)" :key="index" :data-projectId="item.projectId" :data-isCare="item.isCare">
							<view class="jiankongFont jiankImg"></view>
							<!-- <image class="jiankongFont" :class="{btomActive:item.isCare==1}" v-else src="../../static/icon/icon-1.png"></image> -->
							<view>关注</view>
						</view>
						<view class="btomFont_one"  :class="[item.bw!=''&&item.bw!=null ?'btomActive':'']" @click="viewMap" :data-projectId="item.projectId" :data-bw="item.bw" :data-dj="item.dj">
							<image class="jiankongFont" v-if="item.bw!=''&&item.bw!=null" src="../../static/icon/icon-5.png"></image>
							<image class="jiankongFont" v-else src="../../static/icon/icon-4.png"></image>
							<view>地图</view>
						</view>
					</view>
				</view>
			</view>
					
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btomActive:false,
				list: [],
				num:0,
				nums:0,
				news : [],
				years:[],
				yearsIndex:0,
				inputText:"",
				total:0,
				jiankstate:1,
				guanzhustate:0,
				mapstate:1,
				options:[],
				pageNo:1,
				pageSize:10,
				isCare:0,
				rSelect: [],
				backData:[],
				buildPropertyId:"",
				industryId:"",
				proaddId:"",
				isShowNodata:false
			};
		},
		
		onLoad:function(options){
			this.options = options;
			this.loading(options);
			this.getYears();
			//当前年份
			this.$http.get("/sys/v1/currentYear.do",{
				
			}).then(res=>{
				//console.log(res)
				this.year= res.data;
				let yearsIndex=0;
				yearsIndex = this.years.indexOf(this.year);
				this.yearsIndex = yearsIndex;
			})
			
		},
		onShow() {
			setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0
					});
				}, 50);
			},
		onReachBottom() {
			let options = this.options;
			console.log(options);
			// console.log(this.news.length);
			// console.log(this.total);
			if(this.news.length<this.total){
				uni.showLoading({
					title:"加载中……"
				})
				this.pageNo+=1;
				this.loading(options);
				setTimeout(()=>{
					uni.hideLoading()
				},2000);
			}else{
					setTimeout(()=>{
						uni.showToast({
							title:"没有数据啦~",
							icon:"none"
						})
						uni.stopPullDownRefresh()
					},1000)
				}
		},
		methods: {
			upData: function(backData)
			     {
				  this.buildPropertyId = backData.jieduanId;
				  this.proaddId = backData.guishuId;
				  this.industryId= backData.lingyuId;
				  var val=1;
				   this.loading(backData,val);
			     },
				 //年份取后台
				 getYears(){
				 	this.$http.get("/sys/v1/dict.do?code=year",{
				 		
				 	}).then(res=>{
				 		console.log(res);
				 		let years = res.data;
				 		for(var i=0;i<years.length;i++){
				 			let yearName = years[i].name;
				 			this.years.push(yearName);
				 		}
				 		console.log(this.years)
				 	})
				 },
				 
			loading(options,val) {
				if (val == 1) {
					this.num = 0;
					this.nums = 0;
				}
				this.options = options;
				let conditions = options.conditions;
				let projectName = options.projectName;
				let countryid = options.countryid;
				let cityid = options.cityid;
				let region = options.region;
				let urlConditions = '';
				console.log(conditions);
				if (conditions == 'kgyj') {
					urlConditions = 'kgtype=3';
				} else if (conditions == 'jgyj') {
					urlConditions = 'jgtype=3';
				} else if (conditions == 'jdyj') {
					urlConditions = 'isWcyjh=1';
				}
				let years = this.years;
				let yearsIndex = this.yearsIndex;
				let year = years[yearsIndex];
				console.log(this.proaddId);
				this.$http
					.get('/project/v1/cztlist.do?' + urlConditions, {
						params: {
							year: year,
							projectName: projectName,
							buildPropertyId: this.buildPropertyId,
							proaddId: this.proaddId,
							industryId: this.industryId,
							pageNo: this.pageNo,
							isSzdxm: 1,
							cityid: cityid,
							region: region,
							countryid: countryid
						}
					})
					.then(data => {
						console.log(data);
						if (data.data.rows.length == 0) {
							this.isShowNodata = true;
						} else {
							this.isShowNodata = false;
							if (this.pageNo > 1) {
								if(this.buildPropertyId!=""||this.proaddId!=""||this.industryId!=""){
									this.pageNo = 1
								}
								let newsData = data.data.rows;
								var num = this.num
								var nums = this.nums;
								newsData = newsData.map(item => {
									if(item.linkId==null){
											  nums = 0
											  num = num + 1
											  this.num = num
										  } else {
											  nums = nums + 1
											  this.nums = nums
										  }
									return {
										projectId: item.projectId,
										title: item.projectName,
										isCare: item.isCare,
										isMonitor: item.isMonitor,
										planInvestment: item.planInvestment,
										photos: item.photos,
										rate: item.rate,
										bw: item.bw,
										dj: item.dj,
										pxh: item.pxh,
										linkId: item.linkId,
										nums:nums,
										num:num
									};
								});
								this.news = this.news.concat(newsData); // 合并新数据
								console.log(this.news);
								let arrDatas = [];
								for (var i = 0; i < this.news.length; i++) {
									if (this.news[i].isCare == 1) {
										arrDatas.push(i);
									}
								}
								this.rSelect = arrDatas;
								uni.hideLoading();
							} else {
								this.news = data.data.rows;
								this.total = data.data.total;
								var arrData = [];
								for (var i = 0; i < this.news.length; i++) {
									if (this.news[i].isCare == 1) {
										arrData.push(i);
									}
								}
								this.rSelect = arrData;
								 var num = this.num
								 var nums = this.nums
								this.news = this.news.map(item => {
									if(item.linkId==null){
											  nums = 0
											  num = num + 1
											  this.num = num
										  } else {
											  nums = nums + 1
											  this.nums = nums
										  }
									return {
										projectId: item.projectId,
										title: item.projectName,
										isCare: item.isCare,
										isMonitor: item.isMonitor,
										planInvestment: item.planInvestment,
										photos: item.photos,
										rate: item.rate,
										bw: item.bw,
										dj: item.dj,
										pxh: item.pxh,
										linkId: item.linkId,
										nums:nums,
										num:num
									};
								});
							}
						}
					});
			},
			
			confirm(){
				this.goSearch();
				uni.hideKeyboard();
			},
			goSearch(){//搜索查询
				let projectName= this.inputText;
				let options={projectName:projectName};
				console.log(projectName);
				console.log(options.projectName);
				this.loading(options,1);
			},
			
			//顶部导航筛选跳转
			goShaixuan(){
				uni.navigateTo({
					url:"/pages/xmjz/shaixuanCzt"
				})
			},
			yearChange:function(e){
				this.yearsIndex = e.detail.value;
				let options= this.options;
				var that = this;
				that.loading(options);
			},
			openinfo(e) {
				var projectId = e.currentTarget.dataset.projectId;
				console.log(projectId)
				uni.navigateTo({
				    url: '/pages/xmjz/info_czt?projectId=' + projectId
				});
			},
			
			goJk(e){
				console.log(e);
				var projectId = e.currentTarget.dataset.projectId;
				var monitor=e.currentTarget.dataset.isMonitor;
				if(monitor>0){
					uni.navigateTo({
						url:"./jklist?projectId="+projectId
					})
				}
			},
			// 点心心关注
			focusOn(data,index){
				//debugger;
				console.log(data)
				console.log(index)
				let projectId = data.projectId;
				let isCare = data.isCare;
				if(isCare==0){
					this.$http.get("/project/v1/addCare.do?projectId="+projectId,{
						params:''
					}).then(data=>{
						console.log(data);
						if(data.data.code==0){
							uni.showToast({
								title:"您已经关注！",
								icon:"none"
							})
							// let index;
							console.log(this.news[index])
							if(this.news[index].newsid==projectId){
								console.log(this.isCare[index])
								this.news[index].isCare=1
							}
						}
						
					})
				}else{
					this.$http.get("/project/v1/deleteCare.do?projectId="+projectId,{
						params:''
					}).then(data=>{
						console.log(data);
						if(data.data.code==0){
							uni.showToast({
								title:"您已取消关注！",
								icon:"none"
							})
							if(this.news[index].newsid==projectId){
								console.log(this.isCare[index])
								this.news[index].isCare=0
							}
						}
					})
				}
				if (this.rSelect.indexOf(index) == -1) {
		    	    console.log(index)//打印下标
			        this.rSelect.push(index);//选中添加到数组里
		        } else {
			        this.rSelect.splice(this.rSelect.indexOf(index), 1); //取消
			    }
			},
			
			//查看地图
			viewMap(e){
				let bw = e.currentTarget.dataset.bw;
				let dj = e.currentTarget.dataset.dj;
				let id = e.currentTarget.dataset.projectId;
				if(bw!=""&&bw!=null){
					uni.navigateTo({
						url:"/pages/map/maps?bw="+bw+"&dj="+dj+"&id="+id
					})
				}
			},
			previewImage(imageUrl){
				console.log(imageUrl);
				var images = [];
				images.push(imageUrl);
				console.log(images) 
				// let photoList = imgItem.map(item=>{
				// 	return item.fjdz
				// });
				uni.previewImage({
					current:0,
					urls:images,
					loop:true
				})
			}
		},
		watch:{
			num(val) {
				this.nums = 0
			}
		}
	}
</script>

<style scoped>

	/*每个页面公共css */
	@import "uni.css";
	@import "xmjzIndex.css";
</style>
